<template>
	<view class="uc-edit">
		<view class="btn-popup" @click="open">
			<slot></slot>
		</view>
		<uni-popup ref="editorPopup" type="bottom" :mask-click="true">
			<view class="popup-inner">
				<view class="dialog-head">
					<view class="dialog-title">{{title}}</view>
					<view class="iconfont icon-close"  @click="close"></view>
				</view>
				<view class="dialog-body">
					<view class="form-item" v-for="(field, idx) in fields" :key="idx">
						<view class="form-label">{{field.label}}</view>
						<view class="form-value" v-if="!field.type || field.type=='input'">
							<input class="form-control" v-model="field.value" :placeholder="'请输入' + field.label" placeholder-class="edit-placeholder" />
						</view>
						<!-- TODO // 其他类型 -->
					</view>
					
				</view>
				<view class="btn-box">
					<button class="btn-cancel" @click="close">取消</button>
					<button class="btn-confirm" @click="confirm">确定</button>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"uc-edit",
		props:{
			title:{
				type: String
			},
			fields:{
				type: Array
			}
		},
		data() {
			return {

			};
		},
		created() {
			
		},
		computed:{
			
		},
		methods:{
			open(){
				this.$refs.editorPopup.open();
				
			},
			close(){
				this.$refs.editorPopup && this.$refs.editorPopup.close();
			},
			/**
			 * 确认
			 */	
			confirm(){
				let data = {}
				for(let i = 0; i < this.fields.length; i++){
					let field = this.fields[i];
					if(!field.value){
						global.toast('请输入' + field.label);
						return ;
					}
					data[field.name] = field.value
				}
				
				this.$emit('save', data);
				this.close()
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup-inner
	{	
		border-radius: 20rpx 20rpx 0 0;
		overflow:hidden;
		width: 100%;
		background-color: #5C5D6B;
		color:#FFFFFF;
		

		
		.dialog-head{
			display: flex;
			line-height: 124rpx;
			height:124rpx;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			padding:0 32rpx;
			justify-content: space-between;
			.icon-close{
				font-size:24rpx;
				height: 48rpx;
				line-height: 50rpx;
				width: 48rpx;
				text-align: center;
			}
		}
		
		.dialog-body{
			box-sizing: border-box;
			max-height:1080rpx;
			min-height: 320rpx;
			width:688rpx;
			margin:0 auto;
			color: #FFFFFF;
			
			.form-item{
				padding:30rpx 0 20rpx;
				.form-label{
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44rpx;
					
				}
				.form-control{
					color: #FFFFFF;
					font-size:32rpx;
					box-sizing: border-box;
					height: 92rpx;
					line-height: 92rpx;
					border-bottom: 2rpx solid rgba(15,15,15,0.1);			
				}
			}
			
			.flex-form-item{
				display: flex;
			}
			
		}
		
			
		
	}
	
	.btn-box{
		display: flex;
		justify-content: center;
		padding:30rpx 0;
		
		button{
			width:240rpx;
			height: 80rpx;
			padding:0rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			letter-spacing: 1rpx;
			margin:0 10rpx;
		}
		
		.btn-cancel{
			background:#FFFFFF;
			border:2rpx solid $uni-color-primary;
			color:$uni-color-primary;
		}
		.btn-confirm{
			background: $uni-color-primary;
			border:2rpx solid $uni-color-primary;
			color:#FFFFFF;
		}
		
		[disabled]{
			color: rgba(255, 255, 255,.3);
			background-color: #f7f7f7;
			border:2rpx solid #f7f7f7;
		}
	}
	
	
	.edit-placeholder{
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.6);
	}
	
	
	
	
</style>